<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:replace="${title}">博客详情</title>
    <link href="../static/images/avatar.jpg" th:href="@{/images/avatar.jpg}" rel="icon" type="image/x-ico">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../static/css/myStyle.css" th:href="@{/css/myStyle.css}">
    <link rel="stylesheet" href="../static/css/timeline.css" th:href="@{/css/timeline.css}">
</head>
<body>

<!--导航-->
<nav id="nav" th:fragment="menu(n)" class="gird-header">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui olive header item" style="font-family: STSong">LENSTAR</h2>
            <!--<div class="right m-item item m-mobile-hide">-->
            <a href="./index.html" th:href="@{/}" class="m-item item m-mobile-hide" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="types.html" th:href="@{/types/-1}" class="m-item item m-mobile-hide" th:classappend="${n==2} ? 'active'"><i class="clone outline icon"></i>分类</a>
            <a href="tags.html" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3} ? 'active'"><i class="tags icon"></i>标签</a>
            <a href="archives.html" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="clock icon"></i>时间轴</a>
            <a href="about.html" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="info icon"></i>关于我</a>
            <!--</div>-->
            <div class="m-item right item m-mobile-hide">
                <form name="search" action="#" th:action="@{/search}" method="post" target="_blank">
                    <div class="ui icon transparent inverted input">
                        <input type="text" name="query" placeholder="Search...." value="" th:value="${query}">
                        <i class="search link icon"></i>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <a href="#" class="ui menu toggle button m-right-top m-mobile-show" style="background-color: rgba(0,0,0,0); color: gainsboro">
        <i class="sidebar icon"></i>
    </a>


</nav>

<!--顶部图片-->
<div class="m-bg-class_outer" style="width: 100%;height: 750px">
    <img src="../static/images/bg.jpg" th:src="@{/images/bg.jpg}" alt="" class="ui m-bg image" style="width: 100%;height: 100%">
    <div class="m-bg-class_cover" align="center">
        <div class="m-margin-top-maxx" align="center">
            <img class="ui circular image" align="center" src="../static/images/backimg.jpg" th:src="@{/images/me.jpg}" style="width: 150px;height: 150px;">
        </div>
        <div class="m-font-size-title-mediul" align="center">ONESTAR</div>

        <div class="" align="center">
            <a href="#" class="ui tencent circular icon button"><i class="user icon"></i></a>
            <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
            <a href="#" class="ui qq circular icon button" data-content="316392836" data-position="bottom center"><i class="qq icon"></i></a>
            <a href="https://github.com/oneStarLR/" target="_blank" class="ui github circular icon button" data-content="点击跳转GitHub" data-position="bottom center"><i class="github icon"></i></a>
            <a href="https://onestar.blog.csdn.net/" target="_blank" class="ui csdn circular icon button" data-content="点击跳转CSDN" data-position="bottom center"><i class="copyright outline icon"></i></a>
            <a href="#" class="ui email circular icon button" data-content="onestarlr@hotmail.com" data-position="bottom center"><i class="envelope  icon"></i></a>
        </div>

        <div class="ui tencent-qr flowing popup transition hidden">
            <img src="../static/images/oneStar.jpg" th:src="@{/images/oneStar.jpg}" alt="" class="ui rounded image" style="width: 110px">
            <div align="center">公众号</div>
        </div>
        <div class="ui wechat-qr flowing popup transition hidden">
            <img src="../static/images/oneStarWechat.jpg" th:src="@{/images/oneStarWechat.jpg}" alt="" class="ui rounded image" style="width: 110px">
            <div align="center">微信</div>
        </div>
        <div class="ui qq-qr flowing popup transition hidden">
            <img src="../static/images/qq.jpg" th:src="@{/images/qq.jpg}" alt="" class="ui rounded image" style="width: 110px">
            <div align="center">QQ</div>
        </div>

        <div class="m-font-size-text" align="center">欢迎来到我的客栈，我是一颗星，夜空中最亮的那颗</div>
        <hr style="width: 40%">
        <h5 class="m-font-size-text-init-title m-margin-top-large">“大圣，此去欲何?”</h5>
        <h5 class="m-font-size-text-init-title">“踏南天，碎凌霄”</h5>
        <h5 class="m-font-size-text-init-title">“若一去不回……”</h5>
        <h5 class="m-font-size-text-init-title">“便一去不回”</h5>
        <div id="waypoint" class="ui m-margin-top-large" align="center">
            <a href="#" th:href="@{/}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn" th:classappend="${n==1} ? 'active'"><i class="home icon"></i>首页</a>
            <a href="#" th:href="@{/types/-1}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide m-index-btn" th:classappend="${n==2} ? 'active'"><i class="clone outline icon"></i>分类</a>
            <a href="#" th:href="@{/archives}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide" th:classappend="${n==4} ? 'active'"><i class="clock icon"></i>时间轴</a>
            <a href="#" th:href="@{/music}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide" th:classappend="${n==5} ? 'active'"><i class="music icon"></i>音乐盒</a>
            <a href="#" th:href="@{/message}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide" th:classappend="${n==6} ? 'active'"><i class="book icon"></i>留言板</a>
            <a href="#" th:href="@{/friends}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide" th:classappend="${n==7} ? 'active'"><i class="pencil alternate icon"></i>友人帐</a>
            <a href="#" th:href="@{/picture}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide" th:classappend="${n==8} ? 'active'"><i class="image icon"></i>照片墙</a>
            <a href="#" th:href="@{/about}" class="ui circular icon button m-opacity-small m-item item m-mobile-hide" th:classappend="${n==9} ? 'active'"><i class="info icon"></i>关于我</a>
        </div>
        <div class="hiddenDiv"></div>
    </div>

</div>

<!--底部栏-->
<footer th:fragment="footer" class="ui inverted vertical m-padded-tb-massive">
    <div class="ui center aligned container">
        <div class="ui inverted divided stackable grid">
            <div class="four wide column">
                <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" alt="" style="width: 100px;">
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-text-spaced m-text-thin">最新博客</h4>
                <div class="ui inverted link list">
                    <a id="newBlog-1" href="" class="item">Java（User Story）</a>
                    <a id="newBlog-2" href="" class="item">Linux（User Story）</a>
                    <a id="newBlog-3" href="" class="item">Redis（User Story）</a>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-text-spaced m-text-thin">联系我</h4>
                <div class="ui inverted link list">
                    <a href="" class="item">邮箱：XX181028@163.com</a>
                    <a href="" class="item">QQ：1412265423</a>
                </div>
            </div>
            <div class="four wide column">
                <h4 class="ui inverted header m-text-spaced m-text-thin">LENSTAR</h4>
                <p class="m-text-spaced m-text-thin m-opacity-mini" style="color: gainsboro">
                    这是我的个人博客，会分享我所学到的任何知识，希望和大家一起共同进步.....
                </p>
            </div>
        </div>
        <div class="ui inverted section divider"></div>
        <p class="m-text-spaced m-text-thin m-opacity-mini" style="color: gainsboro">
            Copyright &copy; 2020-2021 LENSTAR Designed by LENSTAR
        </p>
    </div>
</footer>

<th:block th:fragment="script">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
<script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
<script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
<script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>
</th:block>

</body>
</html>